<pro-header style="display: flex;">
    
    <ng-template #tab >
         <div><i class="anticon anticon-pushpin-o"></i>&nbsp;{{workItem.itemName}}</div>
         <nz-tabset  style=" margin-top: 2rem;" [nzSelectedIndex]="SelectedIndex" (nzSelectChange)="getRouter($event)">
            <nz-tab  *ngFor="let tab of tabs;let idx = index" >
                <ng-template #nzTabHeading>
                {{tab.name}}
                </ng-template>
            </nz-tab>
     </nz-tabset>
    </ng-template>
</pro-header>


  
<!-- 工作项360导航界面 -->
<div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">

    <div nz-col [nzSpan]="widthLeft" class="mb-md">
        
        <nz-card   [nzBordered]="false">
      
            <ng-template #title>
                <div [ngClass]="{'active': !isShow}">
                <!--<i class="anticon anticon-appstore-o" style="cursor: pointer;" (click)="toggleCollapsed()"></i>-->
              
                <span style="margin-left:5px" *ngIf='isShow'>工作项概述</span>
                </div>
              
            </ng-template>
                <ng-template #extra>
                <a (click)="toggleCollapsed()" [ngClass]="{'active': !isShow}">{{text}}</a>
            </ng-template>
            <ng-template #body>
          
          <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                     <i class="anticon anticon-credit-card"  nz-col [nzSpan]="1"></i>
                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                       <label>工作项名称：</label>
                        <div  nz-col [nzSpan]="19">{{workItem.itemName}}</div>
                        </div>
                       </div>

                    <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                          <i class="anticon anticon-file-text" nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow'  class="divDisplay" class="divDisplay" nz-col [nzSpan]="22">
                                <label>需求描述：</label>
                                 <div  nz-col [nzSpan]="19">{{workItem.requirementDesc}}</div>
                               </div>
                           </div>
                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                            <i class="anticon  anticon-bars "  nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                                <label>需求编号：</label>
                                <div  nz-col [nzSpan]="19">{{workItem.seqno}}</div>
                           </div>
                  </div>

                  <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                            <i class="anticon  anticon-bars "  nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                                <label>ARTF：</label>
                                <div  nz-col [nzSpan]="19">{{workItem.artf}}</div>
                           </div>
                  </div>
                  <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                   <i class="anticon anticon-usergroup-add"  nz-col [nzSpan]="1"></i>
                      <div *ngIf='isShow'  class="divDisplay" nz-col [nzSpan]="22">
                       <label>工作量：</label>
                        <div  nz-col [nzSpan]="19">{{workItem.workLoad}}</div>
                        </div>
                       </div>
                    <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                   <i class="anticon anticon-usergroup-add"  nz-col [nzSpan]="1"></i>
                      <div *ngIf='isShow'  class="divDisplay" nz-col [nzSpan]="22">
                       <label>开发人员：</label>
                        <div  nz-col [nzSpan]="19">{{workItem.developers}}</div>
                        </div>
                       </div>
                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                       <i class="anticon anticon-user-add"  nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22">
                                <label >项目负责人：</label>
                                <div  nz-col [nzSpan]="19">{{workItem.owner}}</div>
                           </div>
                  </div>
                   
                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                          <i class="anticon anticon-calendar"  nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow'  class="divDisplay" nz-col [nzSpan]="22">
                                <label >投放申请数量：</label>
                                <div  nz-col [nzSpan]="19">{{workItem.deliverdCount}}</div>
                           </div>
                  </div>
                     <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                          <i class="anticon anticon-calendar"  nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow'  class="divDisplay" nz-col [nzSpan]="22">
                                <label >代码变动总数：</label>
                                <div  nz-col [nzSpan]="19">{{workItem.standardCount}} &nbsp;（<span style="color:#108ee9;cursor: pointer" (click)="getRouter({router:'workView/standardlist',index:2})">另见标准清单</span>）</div>
                           </div>
                  </div>
                 
                   <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                          <i class="anticon anticon-calendar"  nz-col [nzSpan]="1"></i>
                              <div *ngIf='isShow'  class="divDisplay" nz-col [nzSpan]="22">
                                <label >计划投产时间：</label>
                                <div  nz-col [nzSpan]="19">{{workItem.deliveryPlanTime | date:'yyyy-MM-dd'}}</div>
                           </div>
                  </div>
                    <div nz-row  [nzType]="'flex'" [ngClass]="{'active': !isShow,'noactive':isShow}" nz-col [nzSpan]="24" class="rowContent">
                    <i class="anticon anticon-bars"  nz-col [nzSpan]="1"></i>
                      <div *ngIf='isShow' class="divDisplay" nz-col [nzSpan]="22" >
                       <label>分支信息：</label>
                        <div nz-col [nzSpan]="19">{{workItem.branch}}</div>
                        </div>
                       </div>

                  
                 
            </ng-template>

        </nz-card>

  
    </div>
    <div nz-col [nzSpan]="widthRight" class="mb-md">
        <nz-card   [nzBordered]="false" >
          
            <router-outlet></router-outlet>
        </nz-card>
       
    </div>

</div>
